<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top">
				<uni-forms-item label="上级菜单" name="parentId" required>
					<xy-tree-select v-model="form.parentId" :data="deptOptions" value-name="deptId"
						label-name="deptName" children-name="children" placeholder="选择上级菜单" />
				</uni-forms-item>
				<uni-forms-item label="部门名称" name="deptName" required>
					<uni-easyinput v-model="form.deptName" placeholder="请输入部门名称" />
				</uni-forms-item>
				<uni-forms-item label="显示排序" name="orderNum" required>
					<uni-easyinput v-model="form.orderNum" placeholder="请输入显示排序" />
				</uni-forms-item>
				<uni-forms-item label="负责人" name="leader">
					<uni-easyinput v-model="form.leader" placeholder="请输入负责人" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone">
					<uni-easyinput v-model="form.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email">
					<uni-easyinput v-model="form.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="部门状态" name="status">
					<xy-checkbox v-model="form.status" :data="sys_normal_disable" placement="top" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" :maxlength="-1" autoHeight v-model="form.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="submitForm()">确认</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="cancel()">取消</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		listDept,
		getDept,
		delDept,
		addDept,
		updateDept,
		listDeptExcludeChild
	} from "@/pages_work/api/system/dept";
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable
	} = proxy.useDict("sys_normal_disable");

	/** 表单数据 */
	const form = ref({
		status: '0'
	});

	const deptOptions = ref([]);

	/** 表单检验规则 */
	const rules = ref(proxy.uniappRules({
		parentId: [{
			required: true,
			message: "上级部门不能为空",
			trigger: "blur"
		}],
		deptName: [{
			required: true,
			message: "部门名称不能为空",
			trigger: "blur"
		}],
		orderNum: [{
			required: true,
			message: "显示排序不能为空",
			trigger: "blur"
		}],
		email: [{
			type: "email",
			message: "请输入正确的邮箱地址",
			trigger: ["blur", "change"]
		}],
		phone: [{
			pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
			message: "请输入正确的手机号码",
			trigger: "blur"
		}]
	}))

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.deptId == undefined || params.deptId == null || params.deptId == '') {
			getTreeselect()
		} else {
			getTreeselect()
			handleUpdate(params);
		}
	})

	/** 取消按钮 */
	const cancel = () => {
		uni.navigateBack()
	}

	/** 提交按钮 */
	const submitForm = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if (valid) {
				if (form.value.deptId != undefined) {
					updateDept(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						setTimeout(uni.navigateBack, 1000);
					});
				} else {
					addDept(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						setTimeout(uni.navigateBack, 1000);
					});
				}
			}
		});
	};


	/** 查询菜单下拉树结构 */
	function getTreeselect() {
		deptOptions.value = [];
		listDept().then(response => {
			deptOptions.value = proxy.handleTree(response.data, "deptId");
		});
	}

	/** 修改菜单 */
	const handleUpdate = (row) => {
		const id = row.deptId;
		getDept(id).then(response => {
			form.value = response.data;
		});
	}
	
	onUnload(() => {
		uni.$emit('update')
	})
	
</script>

<style lang="scss">
	@import "@/static/scss/work/form.scss";
</style>
